<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>首页</title>
        <style>
            body{
                perspective: 1000px;
                background-image: url('./img/bg2.jpg');
            }
            h1{
                 margin-top: 50px;
                 margin-left: 45%; 
            }
            .top{
                position: absolute;
            }
            .back{
                width: 300px;
                height: 300px;
                top: 100px;
                margin: 0px auto;
                position: relative;
                transform-style: preserve-3d;
                transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
                transition: 20s;
                opacity: 1;
                cursor: pointer;
            }
            .back{
              animation: xuanzhuan 20s ease infinite alternate;
            }
            .back:hover{
            	animation-play-state:paused;
            }
            
            @keyframes xuanzhuan{
            	from{
            		transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
            	}
            	to{
            		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            	}
            }  
            .imge{
                width: 300px;
                height: 300px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: absolute;
            }
            li{
                list-style: none;
            }
            a{
                text-decoration: none;
                font-size: 20px;
                color: #003;
            }
            .imge:nth-child(4){
                /*右*/
                transform: rotateY(90deg) translateZ(150px);
            }
            .imge:nth-child(1){
                /*上*/
                transform: rotateX(90deg) translateZ(150px);
            }
            .imge:nth-child(2){
                /*下*/
                transform: rotateX(90deg) translateZ(-150px);
            }
            .imge:nth-child(3){
                /*左*/
                transform: rotateY(90deg) translateZ(-150px);
            }
            
            .imge:nth-child(5){
                transform: translateZ(-150px);
            }
            .imge:nth-child(6){
                /*前*/
                transform: translateZ(150px);
                
                 
            }
            
        </style>
    </head>
    <body>

        <h1>个人主页</h1>
        <ul class="top">
            <li><a href="./baidu-nav/百度新闻.html">百度导航</a></li>
            <li><a href="./oppo轮播/oppo.html">oppo轮播</a></li>
            <li><a href="./千图网/千图网.html">千图网</a></li>
            <li><a href="./海贼王/人物.html">人物展示</a></li>
            <li><a href="./海贼王/透明度.html">透明度</a></li>
            <li><a href="./倒计时钟/倒计时.html">简陋版倒计时</a></li>
            <li><a href="./倒计时钟/环形倒计时.html">精装版倒计时</a></li>
            <li><a href="./唯品会/唯品会.html">唯品会</a></li>
            <li><a href="./JQ练习/选项卡.html">选项卡</a></li>
            <li><a href="./JQ练习/下拉菜单.html">jq下拉菜单</a></li>
            <li><a href="./JQ练习/模拟选择.html">模拟选择</a></li>
            <li><a href="./JQ练习/消费订单.html">消费订单</a></li>
            <li><a href="./JQ练习/白条分期.html">白条分期</a></li>
            <li><a href="./0817/遮罩层.html">遮罩层</a></li>
            <li><a href="./0817/复杂轮播图.html">jq轮播完整版</a></li>
            <li><a href="./0817/微博输入字数的统计.html">字数统计</a></li>
            <li><a href="./0817/星级评分完整版.html">星级评分</a></li>
            <li><a href="./0817/图片切换.html">图片切换</a></li>
        </ul>
        
        
        <div class="back">
            <div class="imge" style="background-image: url('./img/66.jpg')">
                <ul>
                    <li><a href="./小米商城/小米.html">小米商城</a></li>
                    <li><a href="./手风琴图片展示/横向变换.html">图片点击切换</a></li>
                    <li><a href="./手风琴图片展示/焦点图片.html">焦点图片</a></li>
                </ul>
            </div>
            <div class="imge" style="background-image: url('./img/22.jpg')">
                <ul>
                    <li><a href="./小米商城/小米.html">小米商城 </a></li>
                    <li><a href="./手风琴图片展示/横向变换.html">图片点击切换</a></li>
                    <li><a href="./手风琴图片展示/焦点图片.html">焦点图片</a></li>
                </ul>
            </div>
            <div class="imge" style="background-image: url('./img/33.jpg')">
            </div>
            <div class="imge" style="background-image: url('./img/44.jpg')">
                <ul>
                    <li><a href="./小米商城/小米.html">小米商城</a></li>
                    <li><a href="./手风琴图片展示/横向变换.html">图片点击切换</a></li>
                    <li><a href="./手风琴图片展示/焦点图片.html">焦点图片</a></li>
                </ul>
            </div>
            <div class="imge" style="background-image: url('./img/55.jpg')">
            </div>
            <div class="imge" style="background-image: url('./img/11.jpg')">
                <ul>
                    <li><a href="./小米商城/小米.html">小米商城</a></li>
                    <li><a href="./手风琴图片展示/横向变换.html">图片切换</a></li>
                    <li><a href="./手风琴图片展示/焦点图片.html">焦点图片</a></li>
                </ul>
            </div>
        </div>
        
        
    </body>
</html>